<template>
  <div class="container">
    <div class="guan">
      <div class="fangkuai"> </div>
      <span class="menu">订单管理</span>
    </div>
    <!-- tab组件 -->
    <Tab />
    <!-- 搜索组件 -->
    <Search @searchParent="searchParent" @chongzhi="shuaxin"/>
    <!-- 表格组件 -->
    <span class="list">订单列表</span>

    <Table :arr="arr" @resetparentFun="getData" @openDialog="parentDialog"/>
    <!-- 分页组件 -->
    <PageCom :total="total" :pageSize="pageSize"/>
    <!-- 弹框组件 -->
    <Dialog v-if="isShow" ref="dia"/>
  </div>
</template>

<script>
import Tab from './components/Tab.vue'
import Search from './components/Search.vue'
import Table from './components/Table.vue'
import PageCom from './components/PageCom.vue'
import Dialog from './components/Dialog.vue'
import { getHome,lookOrder } from '../../api/order'
export default {
  components:{
    Tab,
    Search,
    Table,
    PageCom,
    Dialog
  },
  data(){
    return{
      arr:[],
      search:'',
      isShow:false,
      page:1,
      pageSize:10,
      total:0,
      value1:'',
      value2:''

    }
  },
  mounted(){
    this.getData()//首屏函数

  },
  methods:{
    getData(){

      const parmas ={
        search:this.search,
        page:this.page,   //页码
        pageSize:this.pageSize,   //每页多少条
        value1:this.value1,
        value2:this.value2
        }
        getHome(parmas).then(res=>{
          console.log(res);
          if(res.code==200){
            this.arr=res.data
            this.total = res.total
          }
        })
    },
    searchParent(val){
        this.value1=val.value1
        this.value2=val.value2
        console.log(val);
        this.search =val.search
        this.getData()
      
    },
    parentDialog(val){
      this.isShow = true
      lookOrder(val).then(res=>{
        this.$refs.dia.gridData=[res.data]
        
      })
    },
    shuaxin(){
        this.search =''
        this.getData()

    }
  }
}
</script>

<style lang="less" >
.container{
  text-align: left;
}
.guan{
    margin: 20px 0;
    font-size: 20px;
    .fangkuai{
      width: 8px;
      height: 16px;
      display: inline-block;
      background: #64a5fa;
      margin-right: 14px;
      padding-top: 4px;
    
    }
    // .menu{
    //   float: left;
    // }
  }
  .el-tabs__header{
    margin:0
  }

  .list{
    display: block;
    height: 60px;
    line-height: 60px;
    padding-left: 30px;
    font-weight: 700;
    background: #fff;
  }

</style>